import React from "react";
import { List, Space } from 'antd';
import { Link } from 'react-router-dom';

import {
    UnorderedListOutlined,
    UserOutlined,
    FieldTimeOutlined,
    EyeOutlined
} from '@ant-design/icons';
 
class index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            listData: []
        }

    }
    
    render() {
        const listData = this.props.blpgDataList;
        // home传递过来的数据

        // iconList
        const IconText = ({ icon, text }) => {
            return (
                <Space>
                    {React.createElement(icon)}
                    {text}
                </Space>
            )
        };
        // 文字标红
        const brightenKeyword = (val, keyword) => {
            const Reg = new RegExp(keyword, 'i');
            let res = '';
            if (val) {
                res = keyword ? val.replace(Reg, `<span style="color: red;">${keyword}</span>`) : val;
                return <span dangerouslySetInnerHTML={{ __html: res }}></span>;
            }
        }

        return (
            <List
                itemLayout="vertical"
                size="large"
                style={{ margin: '30px' }}
                pagination={{
                    onChange: (page, pageSize) => {
                        this.props.onShowSizeChange('', listData.keyword, page, pageSize)
                    },
                    onShowSizeChange: (current, size) => {
                        this.props.onShowSizeChange('', listData.keyword, current, size)
                    },
                    total: listData.total,
                    pageSize: listData.pageSize,
                    pageSizeOptions: [5, 10, 15, 20]
                }}
                dataSource={listData.data}
                footer={
                    <div>
                        <b>page end</b>
                    </div>
                }
                renderItem={item => (
                    <List.Item
                        key={item.title}
                        // 点赞留言
                        actions={[
                            <IconText icon={UnorderedListOutlined} text={item.menuNm} key={item.blogId} />,//类别
                            <IconText icon={UserOutlined} text={item.author} key={item.blogId} />,//作者
                            <IconText icon={FieldTimeOutlined} text={item.updateTime} key={item.blogId} />, //时间
                            <IconText icon={EyeOutlined} text={item.visitNum} key={item.blogId} />, //访问量
                        ]}
                        // 图片
                        extra={
                            item.firstImg &&
                            <img
                                width={272}
                                alt=''
                                src={item.firstImg}
                            />
                        }
                    >
                        {/* 标题描述 */}
                        <List.Item.Meta
                            title={
                                <Link
                                    style={{ fontSize: '30px', color: 'rgb(121, 182, 242)' }}
                                    to={`info/${item.blogId}`}
                                >
                                    {brightenKeyword(item.title, listData.keyword)}
                                </Link>
                            }
                            description={brightenKeyword(item.description, listData.keyword)}
                        />
                        {brightenKeyword(item.content, listData.keyword)}
                    </List.Item>
                )}
            />
        )
    }
};
export default index;